<template>
  <div>
    <a-button type="primary" size="small" @click="$refs.WAdd.show(null)">添加</a-button>
    <w-add ref="WAdd" :roles="roles" @reload="loadList" />
    <br /><br />
    <a-table :columns="columns" :data-source="users" bordered row-key="_id">
      <span slot="role" slot-scope="_,item">{{ item.role ? item.role.name : '' }}</span>
      <span slot="state" slot-scope="_,item">
        <a-switch v-model="item.enabled" @change="enabledChange(item)" />
      </span>
      <template slot="action" slot-scope="_,item">
        <a-button type="link" size="small" style="margin-right: 5px" @click="$refs.WAdd.show(item)">编辑</a-button>
        <a-button
          type="link"
          size="small"
          style="margin-right: 5px"
          @click="modifyPassBtnClick(item)"
        >修改密码</a-button>
        <a-button type="link" size="small" @click="removeBtnClick(item)">删除</a-button>
      </template>
    </a-table>
    <w-pass ref="WPass" />
  </div>
</template>

<script>
import WAdd from "@/components/admin/auth/userList/add";
import { Admin } from "@/config/api";
import WPass from "@/components/admin/auth/userList/pass";
export default {
  name: "AdminAuthUserList",
  layout: "admin",
  components: {
    WAdd,
    WPass,
  },
  async asyncData({ app }) {
    const { $wAxios } = app;
    const data = await $wAxios.$get(Admin.auth.user.all);
    return { users: data };
  },
  data() {
    return {
      columns: [
        {
          title: "用户名",
          key: "user",
          width: 200,
          dataIndex: 'user',
        },
        {
          title: "角色",
          scopedSlots: { customRender: 'role' },
        },
        {
          title: "状态",
          width: 80,
          scopedSlots: { customRender: 'state' },
        },
        {
          title: "操作",
          width: 220,
          scopedSlots: { customRender: 'action' },
        },
      ],
      users: [],
      roles: [],
    };
  },
  mounted() {
    this.getRole();
    this.loadList();
  },
  methods: {
    /**
     * 加载列表数据
     */
    loadList() {
      this.$wAxios
        .$get(Admin.auth.user.all)
        .then((data) => {
          this.users = data;
        })
        .catch(() => {});
    },
    removeBtnClick(row) {
      this.$wRemovePop(() => {
        return this.$wAxios.$delete(`${Admin.auth.user.delete}${row._id}`);
      }, row.user).then(() => {
        this.loadList();
      });
    },
    enabledChange(row) {
      this.$wAxios
        .$put(`${Admin.auth.user.update}${row._id}`, {
          enabled: row.enabled,
        })
        .then(() => {
          this.$message.success("状态修改成功");
        })
        .catch(() => {});
    },
    /**
     * 加载角色
     */
    getRole() {
      this.$wAxios
        .$get(Admin.auth.role.all, {
          field: "name _id",
        })
        .then((data) => {
          this.roles = data;
        })
        .catch(() => {});
    },
    modifyPassBtnClick(row) {
      this.$refs.WPass.show(row);
    },
  },
  head() {
    return {
      title: "用户列表",
    };
  },
};
</script>

<style scoped></style>
